<template>
  <page>
    <div slot="content">
      <a-table
        :dataSource="userList"
        :columns="columns"
        rowKey="id"
        :pagination="pagination"
        @change="pageChange"
      >
        <template slot="action" slot-scope="text, row">
          <a-button @click="setUserType(row.id)" v-if="text === 1" type="danger" ghost>设为普通用户</a-button>
          <a-button @click="setUserType(row.id)" v-else type="primary" ghost>设为管理员</a-button>
        </template>
      </a-table>
    </div>
  </page>
</template>

<script>
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      align: 'center'
    },
    {
      title: '用户名',
      dataIndex: 'username',
      align: 'center'
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
      align: 'center'
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      align: 'center'
    },
    {
      title: '用户类别',
      dataIndex: 'userTypeName',
      align: 'center'
    },
    {
      dataIndex: 'userType',
      title: '操作',
      align: 'center',
      scopedSlots: { customRender: 'action' }
    }
  ]
  const pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
    showTotal: total => `共${total}条数据`,
    pageSizeOptions: ['10', '20', '30', '50', '100'],
    hideOnSinglePage: true,
    showQuickJumper: true
  }
  export default {
    name: "user",
    data () {
      return {
        columns,
        pagination,
        userList: []
      }
    },
    mounted () {
      this.getUserList()
    },
    methods: {
      getUserList () {
        this.$api.paper.getUserList().then(res => {
          if (res?.code === 0) {
            this.userList = res.data.records
          } else {
            this.$message.error(res.userMsg)
          }
        })
      },
      setUserType (id) {
        this.$api.paper.setAdmin(id).then(res => {
          if (res?.code === 0) {
            this.$message.success(res.userMsg)
            this.getUserList()
          } else {
            this.$message.error(res.userMsg)
          }
        })
      },
      pageChange (pagination) {
        this.pagination = pagination
        this.getUserList()
      }
    }
  }
</script>

<style scoped>

</style>